<template>
    <div class="register-container">

        <el-card>
            <h2 v-if="!hasSubmit" class="register-title">编辑者注册</h2>
            <el-form
                v-if="!hasSubmit"
                ref="registerForm"
                v-loading="formLoading"
                :rules="rules"
                :model="temp"
                label-position="left"
                label-width="90px"
                style="margin: 20px 100px 0 50px"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="temp.username" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="temp.password" type="password" />
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input v-model="temp.checkPass" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="temp.email" />
                </el-form-item>
                <el-form-item label="联系方式" prop="phone">
                    <el-input v-model="temp.phone" />
                </el-form-item>
                <el-divider content-position="left">选填信息</el-divider>
                <el-form-item label="密保问题" prop="question" style="margin-top: 35px">
                    <el-input v-model="temp.question" />
                </el-form-item>
                <el-form-item label="密保答案" prop="answer">
                    <el-input v-model="temp.answer" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitRegisterForm">注册用户</el-button>
                </el-form-item>
            </el-form>

            <!--当提交完后显示的信息-->
            <div v-if="hasSubmit" class="submit-info">
                <h2>您的请求已成功提交!</h2>
                <h4>目前正在审核中, 请留意通知! 申请通过后将使用账号ID+密码进行登录, 请妥善保存用户信息。</h4>
                <div class="user-info">
                    <h3><span>账号:</span>{{ userInfo.id }}</h3>
                    <h3><span>用户名:</span>{{ userInfo.username }}</h3>
                    <h3><span>邮箱:</span>{{ userInfo.email }}</h3>
                    <h3><span>手机号:</span>{{ userInfo.phone }}</h3>
                </div>
                <router-link to="/login">
                    <el-link type="primary" class="back-link">返回登录页</el-link>
                </router-link>
            </div>
        </el-card>
    </div>
</template>

<script>
import { register } from '@/api/user'

export default {
    name: 'Register',
    data() {
        var validatePwd = (rule, value, callback) => {
            // 基本验证
            if (value === '') {
                callback(new Error('请输入密码'))
            } else if (value.length < 6) {
                callback(new Error('密码不能小于6位'))
            } else {
                callback()
            }
        }
        var validatePwd2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.temp.password) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }
        return {
            // 判断是否提交注册信息
            hasSubmit: false,
            // 注册成功后信息
            userInfo: {},
            // 注册表单
            temp: {
                id: undefined,
                username: '',
                password: '',
                checkPass: '',
                email: '',
                phone: '',
                question: '',
                answer: '',
                role: undefined
            },
            formLoading: false,
            rules: {
                username: [{ required: true, message: '用户名不能为空', trigger: ['blur', 'change'] }],
                password: [
                    { validator: validatePwd, trigger: 'change' },
                    { required: true }
                ],
                checkPass: [
                    { validator: validatePwd2, trigger: ['change', 'blur'] },
                    { required: true }
                ],
                email: [{
                    type: 'email',
                    message: '请输入正确的邮箱地址',
                    trigger: ['blur', 'change'],
                    required: true
                }],
                phone: [{
                    pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
                    message: '请输入正确的手机号或者座机号(区号-尾号)',
                    required: true
                }]
            }
        }
    },
    methods: {
        submitRegisterForm() {
            this.$refs['registerForm'].validate((valid) => {
                if (valid) {
                    this.formLoading = true
                    const _data = Object.assign({}, this.temp)
                    delete _data.checkPass
                    register(_data).then(({ user }) => {
                        this.userInfo = user
                        setTimeout(() => {
                            this.$message({
                                message: '注册申请成功!',
                                type: 'success',
                                duration: 2000
                            })
                            this.formLoading = false
                            this.hasSubmit = true
                        }, 1000)
                    }).catch(() => {
                        this.formLoading = false
                    })
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">

.register-container{
    min-height: 100%;
    width: 100%;
    padding: 50px;
    background-image: linear-gradient(-87deg, #dde9ee 0%, #f0f5f5 100%);
    .el-card{
        margin: 0 auto;
        width: 550px;
        .register-title {
            text-align: left;
            padding-left: 45px;
            padding-bottom: 15px;
        }
        .submit-info {
            padding: 20px;
            h4 {
                font-weight: 400;
            }
            .user-info {
                border: 1px solid #d7dae2;
                padding: 15px 40px 10px;
                span {
                    color: #4e525a;
                    display: inline-block;
                    width: 80px;
                }
            }
            .back-link {
                margin-top: 20px;
                padding-left: 2px;
            }
        }
    }
}

</style>
